import React, { FC, useEffect, useMemo, useState } from 'react'
import styles from './common.module.scss'
import { useRequest, useTitle } from 'ahooks'
import { Button, Table, TablePaginationConfig } from 'antd'
import { deleteUser, getUsers } from '../../service/user'
import ListSearch from '../../components/ListSearch'
import Title from 'antd/es/typography/Title'
import { text } from 'node:stream/consumers'

const UserIndex: FC = () => {
  useTitle('Star问卷-用户管理')
  const [datasource, setDatasource] = useState<any[]>([]) //全部列表
  const [pagination, setPagination] = useState<TablePaginationConfig>({})
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '用户名',
      dataIndex: 'username',
      key: 'username',
    },
    {
      title: '匿名',
      dataIndex: 'nickname',
      key: 'nickname',
    },
    {
      title: '操作',
      dataIndex: '',
      key: 'x',
      render: (record: any) => {
        return (
          <Button
            disabled={record.username === 'admin'}
            onClick={async () => {
              const id = record.id
              await deleteUser(id)
            }}
          >
            删除
          </Button>
        )
      },
    },
  ]

  useEffect(() => {
    const response = getUsers()
    response.then(res => {
      const finalData = []
      for (let i = 0; i < res.length; i++) {
        finalData.push({
          key: i,
          ...res[i],
        })
      }
      setDatasource(finalData)
      setPagination({
        total: finalData.length,
        current: 1,
        showSizeChanger: true,
      })
    })
  }, [])

  return (
    <>
      <div className={styles.header}>
        <div className={styles.left}>
          <Title level={3}>星标问卷</Title>
        </div>
        <div className={styles.right}>
          <ListSearch></ListSearch>
        </div>
      </div>
      <div>
        <Table dataSource={datasource} pagination={pagination} columns={columns} />
      </div>
    </>
  )
}

export default UserIndex
